<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5语义化标签最佳实践</title>
    <meta name="keywords" content="HTML5, 语义化标签, 最佳实践, 前端开发">
    <meta name="description" content="本文介绍了HTML5语义化标签的最佳实践，帮助前端开发者提升代码可读性和SEO效果。">
</head>
<body>
    <!-- header start -->
    <header>
        <h1>不二周助的技术博客</h1>
        <p>分享前端开发的最佳实践与技巧</p>
    </header>
    <!-- header end -->

    <!-- nav start -->
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">文章</a></li>
            <li><a href="#">关于我</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <!-- nav end -->

    <!-- main start -->
    <main>
        <!-- 核心文字内容 -->
        <article>
            <h2>HTML 新特性</h2>
            <p>HTML5 引入了许多新的语义化标签，如 <code>&lt;header&gt;</code>、<code>&lt;nav&gt;</code>、<code>&lt;article&gt;</code>、<code>&lt;section&gt;</code>、<code>&lt;footer&gt;</code> 等。这些标签不仅提升了代码的可读性，还改善了搜索引擎优化（SEO）效果。</p>
            
            <!-- 文档中的主题部分 -->
            <section>
                <h3>语义化标签的优势</h3>
                <ul>
                    <li><strong>提高可读性：</strong> 使用语义化标签可以让代码结构更加清晰，便于开发者理解和维护。</li>
                    <li><strong>增强SEO：</strong> 搜索引擎更容易理解页面内容，有助于提升网站排名。</li>
                    <li><strong>改善无障碍访问：</strong> 语义化标签有助于辅助技术（如屏幕阅读器）更好地解析内容。</li>
                </ul>
            </section>

            <section>
                <h3>多媒体支持</h3>
            <p>HTML5 还引入了对多媒体内容的原生支持，如 <code>&lt;audio&gt;</code> 和 <code>&lt;video&gt;</code> 标签，使得嵌入音频和视频变得更加简单和高效。</p>
            </section>

            <!-- 与主要内容相关的独立内容 -->
             <aside>
                <h3>相关技术链接</h3>
                <ul>
                    <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/header">MDN Web Docs: &lt;header&gt; 标签</a></li>
                    <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/nav">MDN Web Docs: &lt;nav&gt; 标签</a></li>
                    <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/article">MDN Web Docs: &lt;article&gt; 标签</a></li>
                    <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/section">MDN Web Docs: &lt;section&gt; 标签</a></li>
                    <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/footer">MDN Web Docs: &lt;footer&gt; 标签</a></li>
                </ul>
             </aside>

        </article>
    </main>
    <!-- main end -->

    <footer>
        <p>&copy; 2024 不二周助的技术博客. 保留所有权利。</p>
        <p>联系方式:<a href="mailto:14555110@qq.com">14555110@qq.com</a></p>
    </footer>

</body>
</html>